<template>
  <div class="wrapper">
    <div class="form-wrapper">
      <div class="title">修改密码</div>
      <el-form
        ref="ruleForm"
        :model="formData"
        :rules="rules"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="原密码" prop="password">
          <el-input v-model="formData.password" type="password" autocomplete="off" placeholder="输入原密码"/>
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
          <el-input v-model="formData.newPassword" type="password" autocomplete="off" placeholder="输入新密码"/>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkNewPassword">
          <el-input v-model="formData.checkNewPassword" type="password" autocomplete="off" placeholder="再次输入新密码"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm()">提交</el-button>
          <el-button @click="resetForm()">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import { isValidatePassword } from '@/utils/validate'
export default {
  name: 'ChangePassword',
  data() {
    return {
      formData: {
        password: '',
        newPassword: '',
        checkNewPassword: ''
      },
      rules: {
        password: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (!value) {
                return callback(new Error('请输入原密码'))
              }
              if (!isValidatePassword(value)) {
                return callback(new Error('密码格式错误'))
              }
              callback()
            },
            trigger: 'blur'
          }
        ],
        newPassword: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (!value) {
                return callback(new Error('请输入新密码'))
              }
              if (!isValidatePassword(value)) {
                return callback(new Error('密码格式错误'))
              }
              callback()
            },
            trigger: 'blur'
          }
        ],
        checkNewPassword: [
          {
            required: true,
            validator: (rule, value, callback) => {
              var { newPassword = '' } = this.formData || {}
              console.log({ 'formData': this.formData })
              if (!value) {
                return callback(new Error('请再次确认密码'))
              }
              if (newPassword !== value) {
                return callback(new Error('两次密码输入不一致'))
              }
              callback()
            },
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    _beforeCheck() {
      return new Promise((resolve, reject) => {
        this.$refs['ruleForm'].validate(valid => {
          if (valid) {
            resolve(true)
          } else {
            resolve(false)
          }
        })
      })
    },
    async submitForm(formName) {
      const SUCCESS_MSG = '密码修改成功，请重新登录'
      var check = await this._beforeCheck()
      var { password, newPassword } = this.formData || {}
      if (check) {
        this.$store.dispatch('user/resetPassword', { password, newPassword }).then(() => {
          this.$store.dispatch('user/fedLogOutToLogin')
          this.$message({
            type: 'success',
            message: SUCCESS_MSG
          })
        }).catch(msg => {
          this.$message({
            type: 'error',
            message: msg
          })
        })
      }
    },
    resetForm() {
      this.$refs['ruleForm'].resetFields()
    }
  }
}
</script>

<style lang="scss" scoped>
.wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.form-wrapper {
  width: 520px;
  margin:60px auto 0 auto;

}
.title{
    text-align: center;
    line-height: 60px;
    color:#333;
    // font-weight: bold;
    font-size:20px;
    // margin-bottom:30px;
}
</style>
